<template>
  <div style="width: 100%">
    <el-select
      style="width: 100%"
      v-model="findProfileTxt"
      filterable
      clearable
      remote
      reserve-keyword
      :placeholder="$t('loan.iptOrderNo')"
      :remote-method="remoteMethod"
      @change="selectProfileChange"
      @clear="clearVal"
    >
      <el-option
        v-for="item in profileList"
        :key="item"
        :label="item.orderNo"
        :value="item.orderId"
      >
        <span>{{ item.orderNo }}</span>
      </el-option>
    </el-select>
  </div>
</template>

<script lang="ts">
import { reactive, toRefs, onMounted, onActivated } from 'vue'
import { getLikeOrderNoList } from '@/api/report'
import { useEmitt } from '@/hooks/web/useEmitt'
export default {
  props: {
    queryType: String //查詢類型，報表：report
  },
  setup(props) {
    const { emitter } = useEmitt()
    const state = reactive({
      findProfileTxt: '', // 查找數據
      profileList: [], // 查询出貸款號碼列表
      queryType: props.queryType
    })
    onMounted(async () => {
      init()
    })
    onActivated(async () => {})
    const methods = {
      clearVal() {
        state.orderId = null
        emitter.emit('getOrderNo', null)
      },
      // 獲取貸款號碼列表，模糊查询
      async remoteMethod(query) {
        if (query) {
          await getLikeOrderNoList({ orderNo: query }).then((res) => {
            if (res) {
              state.profileList = res.data
            }
          })
        }
      },
      selectProfileChange(e) {
        for (const item of state.profileList) {
          if (item.orderId == e) {
            // 如果綁定的是報表，返回貸款號碼數組
            if (state.queryType == 'report') {
              // 根據貸款號碼返回客戶明細
              emitter.emit('getOrderNo', item)
            }
          }
        }
      }
    }
    // 渲染页面的接口
    const init = async () => {}
    return {
      ...toRefs(state),
      ...methods
    }
  }
}
</script>
<style scoped></style>
